<template>
  <div>
    <el-form ref="goodsRef" :inline="true" :model="goodsCl.goodsS" class="demo-form-inline">
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="goodsCl.goodsS.name" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品类型" prop="typeId">
            <el-cascader v-model="goodsCl.goodsS.typeId" :options="goodsCl.type" :props="goodsCl.props" clearable :show-all-levels="false" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品牌" prop="brandId">
            <el-select v-model="goodsCl.goodsS.brandId">
              <el-option v-for="item in goodsCl.brand" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="规格" prop="specId">
            <el-select v-model="goodsCl.goodsS.specId" @change="changSpecDetail">
              <el-option v-for="item in goodsCl.spec" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格分类" prop="specDetailId">
            <el-select v-model="goodsCl.goodsS.specDetailId">
              <el-option v-for="item in goodsCl.specDetail" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="标签" prop="labelId">
            <el-select v-model="goodsCl.goodsS.labelId">
              <el-option v-for="item in goodsCl.labels" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="是否在售" prop="onSale">
            <el-select v-model="goodsCl.goodsS.onSale">
              <el-option v-for="item in goodsCl.onSale" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="价格" prop="startPrice">
            <el-input v-model="goodsCl.goodsS.startPrice" type="text" style="width: 100px" />
          </el-form-item>
          <el-form-item label="~" prop="endPrice">
            <el-input v-model="goodsCl.goodsS.endPrice" type="text" style="width: 100px" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button type="primary" @click="reset(goodsRef)">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="opendialog()">
          <el-icon>
            <Plus />
          </el-icon>
          添加商品
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="goodsCl.goodsTable" stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80">
        <template #default="scope">
          {{ (goodsCl.goodsS.page - 1) * goodsCl.goodsS.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="商品名称" prop="name">
        <template #default="scope">
          <el-tooltip :content="scope.row.labelName" placement="top" effect="light">
            {{ scope.row.name }}
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="商品价格" prop="price" />
      <el-table-column align="center" header-align="center" label="商品数量" prop="goodsNum" />
      <el-table-column align="center" header-align="center" label="商品状态" prop="onSale">
        <template #default="scope">
          <el-switch v-model="scope.row.onSale" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" inline-prompt @change="chengSale(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="创建时间" prop="createTime" width="180" />
      <el-table-column align="center" fixed="right" header-align="center" label="操作" width="220">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="toEdit(scope.row.id)">编辑 </el-button>
          <el-button link size="small" type="primary" @click="addFile(scope.row.id)">添加商品附件 </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deleteGoods(scope.row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="goodsCl.openDialog" destroy-on-close title="添加商品" @close="resetDialog(eidtRef)">
      <el-form ref="eidtRef" :model="goodsCl.goodsEdit" :rules="goodsCl.goodRules">
        <el-row :gutter="10" class="row-bg">
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="goodsCl.goodsEdit.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品类型" prop="typeId">
              <el-cascader v-model="goodsCl.goodsEdit.typeId" :options="goodsCl.type" :props="goodsCl.props" clearable :show-all-levels="false" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌" prop="brandId">
              <el-select v-model="goodsCl.goodsEdit.brandId">
                <el-option v-for="item in goodsCl.brand" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品规格" prop="specId">
              <el-select v-model="goodsCl.goodsEdit.specId" @change="changSpecDetail">
                <el-option v-for="item in goodsCl.spec" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品规格详情" prop="specDetailId">
              <el-select v-model="goodsCl.goodsEdit.specDetailId">
                <el-option v-for="item in goodsCl.specDetail" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签" prop="labelId">
              <el-select v-model="goodsCl.goodsEdit.labelId">
                <el-option v-for="item in goodsCl.labels" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-button @click="goodsCl.openLabel = true"
                ><el-icon><Plus /></el-icon>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算方式" prop="buyType">
              <el-select v-model="goodsCl.goodsEdit.buyType">
                <el-option v-for="item in goodsCl.buyTypeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="price">
              <el-input-number v-model="goodsCl.goodsEdit.price" :min="0" :precision="2" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="goodsCl.goodsEdit.sort" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品数量" prop="goodsNum">
              <el-input-number v-model="goodsCl.goodsEdit.goodsNum" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="推荐到平台" prop="recommend">
              <el-switch v-model="goodsCl.goodsEdit.recommend" class="ml-2" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品小图" prop="imageUrl">
              <ImgUpload v-model:file_url="goodsCl.goodsEdit.imageUrl" :file_max="1" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="简介" prop="subtitle">
              <el-input v-model="goodsCl.goodsEdit.subtitle" :rows="2" type="textarea" placeholder="输入简介" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说明" prop="introduce">
              <Editor v-model:editorValue="goodsCl.goodsEdit.introduce"></Editor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="editGoods">保存 </el-button>
          <el-button @click="goodsCl.openDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="goodsCl.openLabel" destroy-on-close width="20%" top="50vh">
      <el-form>
        <el-row :gutter="10" class="row-bg">
          <el-form-item>
            <el-col :span="24">
              <el-input v-model="goodsCl.label" :rows="2" placeholder="输入标签" />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="24">
              <el-button type="primary" @click="addLabels">保存 </el-button>
              <el-button @click="goodsCl.openLabel = false">取消</el-button>
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="goodsCl.openFile" title="添加商品附件">
      <el-form>
        <el-form-item label="图片上传" prop="imageUrls">
          <ImgUpload v-model:file_url="goodsCl.files.imageUrls" :file_max="5" />
        </el-form-item>
        <el-form-item label="文件上传" prop="fileUrls">
          <FileUpload v-model:file_url="goodsCl.files.fileUrls" :file_max="5" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addFiles">保存 </el-button>
          <el-button @click="goodsCl.openFile = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <Page :pageData="goodsCl.goodsS" @selectPage="search"></Page>
</template>
<script lang="ts" setup>
import { goodsClass } from '@/page/types/sale/goods'
import { goodsPage, selectType, selectSpec, selectSpecDetail, selectLabel, selectBrand, updateGoods, addGoods, detailGoods, addLabel, delGoods, getGoodsFile, addGoodsFile } from '@/api/sale'
import { ElMessage, FormInstance } from 'element-plus/es'
import Editor from '@/components/MyEditor.vue'
import FileUpload from '@/components/FileUpload.vue'
import ImgUpload from '@/components/ImgsUpload.vue'
const goodsCl = reactive(new goodsClass())
const eidtRef = ref()
const goodsRef = ref()
const getAllSelect = () => {
  selectType(null).then(res => {
    goodsCl.type = res.data
  })
  selectSpec(null).then(res => {
    goodsCl.spec = res.data
  })
  getLabel()
  selectBrand(null).then(res => {
    goodsCl.brand = res.data
  })
  search()
}

const getLabel = () => {
  selectLabel(null).then(res => {
    goodsCl.labels = res.data
  })
}
const search = () => {
  goodsPage(goodsCl.goodsS).then(res => {
    goodsCl.goodsTable = res.data.records
    goodsCl.goodsS.page = res.data.current
    goodsCl.goodsS.size = res.data.size
    goodsCl.goodsS.total = res.data.total
  })
}
const changSpecDetail = (value: string) => {
  selectSpecDetail(value).then(res => {
    goodsCl.specDetail = res.data
  })
}
const reset = (rest: FormInstance | undefined) => {
  if (!rest) return
  rest.resetFields()
  search()
}
const resetDialog = (rest: any) => {
  if (!rest) return
  rest.resetFields()
  goodsCl.goodsEdit = {}
}
const opendialog = () => {
  goodsCl.openDialog = true
  goodsCl.goodsEdit = {}
}
const toEdit = (id: any) => {
  detailGoods(id).then(res => {
    goodsCl.goodsEdit = res.data
    goodsCl.goodsEdit.price = Number(res.data.price)
    goodsCl.openDialog = true
    changSpecDetail(goodsCl.goodsEdit.specId)
  })
}
const editGoods = () => {
  if (goodsCl.goodsEdit.buyType.name) {
    goodsCl.goodsEdit.buyType = goodsCl.goodsEdit.buyType.name
  }
  if (goodsCl.goodsEdit.id) {
    updateGoods(goodsCl.goodsEdit).then(res => {
      search()
      ElMessage({
        message: '更新商品信息成功',
        type: 'success'
      })
    })
  } else {
    addGoods(goodsCl.goodsEdit).then(res => {
      search()
      ElMessage({
        message: '添加商品信息成功',
        type: 'success'
      })
    })
  }
  goodsCl.openDialog = false
}
const addLabels = () => {
  addLabel(goodsCl.label).then(res => {
    ElMessage({
      message: '添加标签成功',
      type: 'success'
    })
    goodsCl.openLabel = false
    getLabel()
  })
}
const chengSale = (row: any) => {
  console.log(row)
  const data = {
    id: row.id,
    onSale: row.onSale
  }
  updateGoods(data).then(res => {
    if (row.onSale) {
      ElMessage({
        message: '启用成功',
        type: 'success'
      })
    } else {
      ElMessage({
        message: '禁用成功',
        type: 'success'
      })
    }
  })
}
const deleteGoods = (id: string) => {
  delGoods(id).then(res => {
    search()
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
  })
}
const addFile = (id: string) => {
  getGoodsFile(id).then(res => {
    goodsCl.files.imageUrls = res.data.imageUrls
    goodsCl.files.fileUrls = res.data.fileUrls
    goodsCl.files.id = id
    goodsCl.openFile = true
  })
}
const addFiles = () => {
  addGoodsFile(goodsCl.files.id, goodsCl.files).then(res => {
    ElMessage({
      message: '添加附件成功',
      type: 'success'
    })
    goodsCl.openFile = false
  })
}
onMounted(() => {
  getAllSelect()
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
